<template>
  <div class="comment-details clear">
    <div class="comment-title">
      <span class="left">老师</span>
      <span class="right">{{info.teacher}}</span>
    </div>
    <div class="top">
      <p class="title">{{info.txt}}</p>
      <p class="time">{{info.create_time}}</p>
    </div>
    <div class="comment">
      <p class="title">点评内容</p>
      <div class="cons" v-if="info.review==1">
        <div v-html='info.content'>
        <p>“最大的变化，遇到不会的题情绪稳定了很多 可以独立思考 记忆比较牢固。”</p>
        <p>对从来没有学过画画的她，这学期开学说是要学速写，画的真好！还说做为一个才上六节课的新生来说，她真的很棒！</p>
        </div>
        <p class="time">评论于 {{info.review_time}}</p>
      </div>
      <div class="none-con" v-else>
        <img src="@/assets/tykt01.png" alt="">
        <p>当前暂未点评</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {storecomment} from '@/api/api'
  export default {
    components: {
    },
    data () {
      return {
        info:[],
        cons: '',
      }
    },
    created () {
      this.id = this.$route.query.id
      this.comment()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      comment(){
        storecomment(this.id).then((res) =>{
          console.log(res)
          this.info=res.data.info
          console.log(this.info)
        }).catch((err) => {
          console.dir(err)
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.comment-details
  .comment-title
    display flex
    padding 0 1.5rem
    line-height 5rem
    font-size 1.5rem
    border-bottom 1rem solid #f5f5f5
    span
      flex 1
    .right
      text-align right
  .top
    padding 1.5rem 0
    padding-left 1.5rem
    border-bottom 1rem solid #f5f5f5
    .title
      color #333333
      font-size 1.5rem
      font-weight 500
    .time
      color #999
      font-size 1.2rem
  .comment
    background-color #fff
    padding 0 1.5rem
    .title
      line-height 2.7rem
      font-size 1.7rem
      color #000
      font-weight bold
      padding 1.5rem 0
    .cons
      font-size 1.3rem
      color #333
      line-height 2.7rem
      .time
        font-size 1.2rem
        color #999
        margin-top 1rem
  .none-con
    position relative
    min-height 40vh
    img
      width 7.25rem
      position absolute
      left 50%
      margin-left -3.625rem
      top 6rem
    p
      width 100%
      text-align center
      font-size 1.3rem
      color #666
      position absolute
      top 18rem
</style>
